<template>
	<view>
		  <!-- #ifdef MP-WEIXIN -->
		<navbar  title="设备续租" :isGoBack="true" :isNotice="true" ></navbar>
			  <!-- #endif -->	
		 	
		<view class="ml-20 mr-20 border-radius" style="background: #fff;margin-top: 20rpx;"> 
		    <view class="order_main">	
				<view class="flex pl-35 flex-direction" v-for="(item,index) in order_list.goods" :key="index">
					<view class="flex mt-20 mb-20">							
						<view slot='icon' class="flex align-center" >
							<image class="grid-img" :src="item.goods_logo" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
						</view>
						<view class="confirm-wrap-content flex flex-direction justify-between ml-10" slot='content'>
							<view>
							  <view class='flex align-center cell text-lg mb-10'>{{item.goods_title}}</view>
							  <view class='flex align-center cell text-sm text-gray mb-10'>{{item.goods_spec}}</view>
							</view>
							<view class='confirm-wrap-price flex  text-sm'>
							 <text class="text-red" style="color: #FF2A00;font-family: Source Han Sans CN;"> 起租￥{{item.selling_price}}/天</text>   
							   <text class="text-red ml-15" style="color: #FF2A00;font-family: Source Han Sans CN;"> 续租￥{{item.lease_price}}/天</text>
							</view>
							<view class='confirm-wrap-price flex justify-between text-lg mr-10' @click="feeGoods(1)">
								<text class="productNameText" style="color:rgba(15, 21, 30, 0.4);">配件(免费):{{order_list.fee_list_name}}</text>
								<u-icon name="arrow-right" color="rgba(15, 21, 30, 0.4);" size="15"></u-icon>
							</view>
						</view>
				    </view>
					<view class="flex mt-20 mb-20 align-center text-center" v-if="order_list.acces_list">
						<view class="flex" v-for="(image,index) in order_list.acces_list" :key="key">
							<image v-if="index<5" class="mr-15"  :src="image.goods_logo" style="width: 80rpx; height: 80rpx;"></image>
						</view>
						<view class="flex" style="position: absolute; right: 15px;" @click="feeGoods(2)">
							<text style="color:rgba(15, 21, 30, 0.4);font-size: 28rpx;">付费配件({{order_list.acces_list.length}})</text>
							<u-icon name="arrow-right" color="rgba(15, 21, 30, 0.4);" size="15"></u-icon>
						</view>
					</view>
		        </view>
			</view>
		</view>		
		
		<view class="send_info">
			<view class="send_left">
				 <image src="../../../../static/resource/order_date.png"  style="width: 32rpx; height: 32rpx;"></image>
				 <text class="ml-15" style="font-size: 28rpx;color: #011F37;">租赁周期</text>
			</view>
			<view class="send_left">
				<view class="flex flex-direction mr-10">
					<text style="font-size: 28rpx;color: #011F37;">{{date_time}}</text>
				</view>
				<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"  @click="open_date"></u-icon>
			</view>
		</view>	
		 
		 
		<view class="main-cur flex flex-direction text-dff ">
			<view class="flex justify-between pr-20 pt-30" style="border-top: 1rpx solid #f3f3f3;">
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">器材租金</text>	
				<text class="text-df">￥{{order_list.selling_price}}</text>
			</view>
			
			<view class="flex justify-between pr-20 pt-30" >
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">付费配件</text>	
				<text class="text-df">￥{{order_list.sellingPrice}}</text>	
			</view>		
			
			
			
			<view class="flex justify-end align-center p-30">
				
				<text class="text-sm ml-15" style="font-size: 24rpx;color: #011F37;">合计租金</text>
				<text class="ml-15" style="font-weight: bold;font-size: 28rpx;color: #011F37;">￥{{order_list.lease_total}}</text>	 
			</view>			
		</view>	
		
		
		
	<!--免费商品-->
	<t-accesGoods :show="showfee" ref="accesList" @accesClose="accesClose" :atype='atype' @accesOk="accesOk"></t-accesGoods>	  

	<!-- 结算信息 -->
	<t-submit-bar :show="showPay" :maskClosable="showSelection"  :setting_money="order_list.lease_total+''"  @confirm="wxconfirm" :type="settle_type"></t-submit-bar>	
	
	
	 <u-calendar ref="calendar" title="租期选择"   :defaultDate="defaultDateMultiple" round="true" color="#FFA200" :show="date_show" :mode="mode"  :formatter="formatter" @confirm="confirm" @close="date_close"></u-calendar>
	
	</view>
</template>

<script>
	import accesGoods from "@/components/accesGoods/index.vue";
	import address from "@/components/address/index.vue";
	import submit from "@/components/submit-bar/index.vue";
	import QRCode from "@/utils/weapp-qrcode.js" //引入生成二维码的插件
	import config from '@/utils/config.js';
	
	export default {
		components: {
			"biz-address": address,
			"t-submit-bar": submit,
		    "t-accesGoods":accesGoods
		},
	 	data() {
	 		return {
				orderId:'',
				order_list:{
					order:{
						storage:{}
					}
				},    
				shopInfo:{},
				showfee:false,
				atype:1,
				orderType:2,//2:快递，1：门店
				back_kuaidi_name:'',
				back_kuaidi_number:'',
				date_show:false,
				mode: 'range',
				date_time:'',
				defaultDateMultiple: [],
				atype:"1",
				shop_name:'',
				shop_id:'',
				showSelection:false,
				showPay:true,
				showSelection:false,
				settle_type:6,
			}
		},
		onLoad(options) {
			if(options.orderId){
				this.orderId=options.orderId
			}			
		},
		onShow() {
			this.getOrderDetail()
			
		},
		methods:{				
			//支付
			wxconfirm(){
			    let obj_data={
			    	orderId:this.orderId,
			    	defaultDateMultiple:JSON.stringify(this.defaultDateMultiple),
			    	token:uni.getStorageSync('userInfo').app_openid,
			    	login_type:'app',
			    }			
				this.$http.leaseOrder(obj_data).then(res=>{
					if(res.resCode=="9999"){
						console.log(res.data)
						my.tradePay({
						  tradeNO:res.data.data,
						  success: (res1) => {
							  console.log(res1,'支付成功 res1')
							  if(res1.resultCode == 9000){
								  wx.navigateTo({
								    url: '/pages/pagesOrder/success/index?pay_no='+res.data.pay_no+'&type=2'
								  })								
							  }else {
								uni.showToast({title:'支付失败，请联系客服',icon:"none"})	
								setTimeout(function () {
									wx.navigateTo({
									  url: '/pages/order/index' 
									})
								}, 1500) //延迟时间
							  }
						  },
						  fail: (err1) => {
							 // 支付不成功，具体原因看返回，去对照文档
						    console.log(err1,'支付不成功 err1')
						    uni.showToast({title:'支付失败，请联系客服',icon:"none"})
							setTimeout(function () {	
								wx.navigateTo({
								  url: '/pages/order/index' 
								})
							}, 1500) //延迟时间
						  }
						});						
					  }else{
						uni.showToast({title:res.resMessage,icon:"none"})
					  }
				})			      		
			},
			
			
			//获取商品信息
			getOrderDetail(){
				let that=this
				let obj_data={
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					order_id:this.orderId,
					defaultDateMultiple:JSON.stringify(this.defaultDateMultiple),
				}      
				this.$http.orderInfo(obj_data).then(res=>{               
					if(res.resCode=="9999"){
					  that.order_list=res.data
					  that.date_time=res.data.date_time
					  that.defaultDateMultiple=res.data.defaultDateMultiple
					}else{
					  uni.showToast({title:res.resMessage,icon:"none"})
					}
				})  
			},
			//确认地址
			chooseaddess(events){
				this.shop_name=events.realname
				this.shop_id=events.id
				this.showSelection=false
			},
			//选择收货地址
			routeToNext(){				
				let that=this
				let goodsId = this.order_list.goods[0].goods_id
				this.$http.AddressList({
					goodsId,
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					type:1,
					}).then(res=>{
					if(res.resCode=='9999'){
						this.showSelection=true
						that.$refs.goodsSpec.showSpecs(res.data)        
					}
				}) 			
			},
			chooseCancel(){
				this.showSelection=false
			},
			
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				
				// 对day.date格式化成 "YYYY-MM-DD HH:mm:ss"
				day.date = moment(day.date).format("YYYY-MM-DD HH:mm:ss")
				
				if(day.month == month && day.day == date + 3){
					day.bottomInfo = ''
					day.dot = true
				}
				return day
			},
			//开启日历
			confirm(e) {
				console.log(e);
				this.defaultDateMultiple=e
				let length=e.length
				console.log('length',length)
				this.date_time=e[0]+ '至' + e[length-1]
				this.date_show=false
				this.getOrderDetail()
				
			},
			//关闭日历
			date_close(){
				this.date_show=false
			},
			open_date(){
				this.date_show=true
			},
			changeOrder(events){
				console.log('events',events.currentTarget);
				this.orderType=events.currentTarget.dataset.ordertype   
			},
			feeGoods(type){
				this.showfee=true
				this.atype=type
				this.$refs.accesList.OrderSpecs(this.orderId,type)
			},
			accesClose(){
				this.showfee=false
			}
		}
	}
</script>

<style>
	page{
	  background-color: #f3f6fb;
	}
	
	.about-button{
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding-bottom: 40rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		 border: none !important;
	}
	
	.about-button-alipay{
		width: 620rpx;
		font-size: 28rpx;
		color: #fff;
		background: linear-gradient(-90deg, #FFA200 0%, #FFC13D 100%);
		border-radius: 40rpx;
		border: none !important;height: 80rpx;text-align: center;line-height: 81rpx;
		
	}
	
	button::after {
	    border: none;
	}
	
	.about-button:active{
	  opacity: 0.5;
	}
	.button-address{
		width: 160rpx;
		
	}
	
	.send_number{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: 100rpx;
		color: rgba(1, 31, 55, 0.6);
		/* border-radius: 10rpx; */
		background:rgba(1,31,55,0.05);	
	}
	.order_active{
		font-weight: bold;
		font-size: 34rpx;
		color: #FFA200;
		background: #ffff;
		margin-top: -30rpx;
		padding-top: 30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.send_number text{
		font-weight: 400;
		font-size: 32rpx;
		
		margin-left: 15rpx;
		line-height: 174rpx;
	}
	
	.main-cur{
		display:flex;
		flex-direction:column;
		margin-top: 15rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		/* padding: 20rpx 20rpx 35rpx 20rpx; */
		background-color: #ffff;		
		border-radius:20rpx;
	}
	
	.mask {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  display: flex;
	  background-color: rgba(0, 0, 0, 0.7);
	  z-index: 9999;
	  flex-direction: column;
	  justify-content: flex-end;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  background: white;
	  border-top-right-radius: 20rpx;
	  border-top-left-radius: 20rpx;
	}
	.send_info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 16rpx; 
		padding: 30rpx; 
		margin: 20rpx 20rpx 0rpx 20rpx;
	}
	.send_left{
		display: flex;
		align-items: center;
	}
	.top {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  border-bottom: 1rpx solid #d3cfcf;
	}
	
	.top-text {
	  font-size: 30rpx;
	  width: 150rpx;
	  height: 100rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	}
	
	.top-left-color {
	  color: #878787;
	}
	
	.top-left-color-hover {
	  color: #f1eaea;
	}
	
	.top-right-color {
	  color: #1296DB;
	}
	
	.top-right-color-hover {
	  color: #82ccf3;
	}
	
	.item {
	  width: 100%;
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 18px;
	}
	.productNameText{
		width: 420rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		word-break:break-all;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;overflow:hidden;
		font-size: 24rpx;
		color: #011F37;
		padding-right: 20rpx;
	}
	
	
	.shop_info{
	  background: #fff;
	   width: 100%;
	   height: auto;
	   display: flex;
	  flex-direction: row;
	  font-family: "Microsoft YaHei";
	}
	.shop_detail{
	  font-size: 28rpx;
	  margin: 20rpx 50rpx;
	}
	.shop_detail_l2{    
	  display: flex;
	  flex-direction: row;
	  color: gray;
	  font-size: 13px;
	  margin-left: -19px;
	  width: 490rpx;
	  margin-top: 10rpx;
	}
	.shop_type{
	  display: flex;
	  flex-direction: row;
	  padding: 17rpx;
	  width: 157rpx;
	  background: #fff;
	  height: 25rpx;
	  border-radius: 35rpx;
	  margin-top: 46rpx;
	  margin-right: 19rpx;
	  border: 2rpx solid rgb(216, 210, 210);
	  box-shadow: 0 0 5px rgb(202, 196, 196);
	}
	
	.shop_type_l1{
	  background: #000000;
	    color: white;
	    text-align: center;
	    font-size: 28rpx;
	    margin: -12rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	}
	
	.shop_type_l2{
	 
	    color: rgb(165, 155, 155);
	    text-align: center;
	    font-size: 28rpx;
	    margin: -10rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	  
	}
	.grid-img{  
	  width: 160rpx;
	  height: 160rpx;
	  margin: 15rpx;
	  border-radius: 10rpx;
	  
	}
	
	.qhm{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 14px;
	  background: #f5f2f2;
	  border-width: 50px;
	  border-radius: 10rpx;
	  width: 140rpx;
	  margin-left: 42%;
	  margin-top:20rpx;
	  border-color: #000;
	  color: rgb(82, 76, 76);
	}
	
	.qhm3{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;  
	}
	.submit-btn-right {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #FFF;
	  min-width: 240rpx;
	  width: 100%;
	  height: 76rpx;
	  opacity: 1;
	  border-radius: 38rpx;
	  margin-top: 2rpx;
	}

</style>